import "../login/login.css";
import wx from "../../assets/wx.png"
import { Form, Input, Button, Toast } from "antd-mobile";
import { logi } from "../../api/login.js";
import { useNavigate } from "react-router-dom";

export default function Login() {
  const navigate = useNavigate();

  const onFinish = async (values) => {
    try {
      // 显示加载状态
      Toast.show({
        icon: 'loading',
        content: '登录中...',
        duration: 0, // 不自动关闭
        position: 'top'
      });
      
      // 调用登录接口
      const res = await logi(values);
      
      // 隐藏加载状态
      Toast.clear();
      
      // 显示成功消息
      Toast.show({
        icon: 'success',
        content: '登录成功',
        position: 'top'
      });
      
      // 这里可以添加登录成功后的逻辑，比如跳转到首页
      console.log('登录成功', res);
      
      // 示例：存储用户信息或token
      localStorage.setItem('userInfo', JSON.stringify(res.data));
      
      // 跳转到首页
      navigate('/home'); // 根据实际需要跳转的路径进行修改
    } catch (error) {
      // 隐藏加载状态
      Toast.clear();
      
      // 显示错误消息
      let errorMessage = '登录失败';
      if (error.message) {
        errorMessage = error.message;
      } else if (error.response && error.response.data) {
        errorMessage = error.response.data.message || JSON.stringify(error.response.data);
      }
      
      Toast.show({
        icon: 'fail',
        content: errorMessage,
        position: 'top'
      });
      
      console.error('登录失败', error);
    }
  };

  return (
    <div className="login">
      <div className="login-title">
        <h2 className="login-title-text">登录</h2>
      </div>

      {/* 登录表单 */}
      <div className="login-form">
        <Form layout="vertical" onFinish={onFinish} style={{backgroundColor:'#FFF7D8'}}>
          <Form.Item name="tel" rules={[{ required: true, message: '请输入用户名' }]}>
            <Input placeholder="请输入用户名" clearable />
          </Form.Item>
          <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
            <Input placeholder="请输入密码" clearable type="password" />
          </Form.Item>
          <div className="login-form-but" style={{backgroundColor:'#FFF7D8'}}>
            <Button
              block
              size="large"
              type="submit"
              style={{
                backgroundColor: "#E0AF75",
                borderRadius: 30,
                color: "white",
                marginTop: 20,
                width: "90%",
                marginLeft: "5%",
              }}
            >
              登录
            </Button>
          </div>
        </Form>
        <div className="login-form-footer">
          <p>忘记密码</p>
          <p>免密码登录</p>
        </div>
        <div style={{ marginTop: 2, textAlign: "center" }} >没有账号，去注册</div>
        <div style={{ marginTop: 60, textAlign: "center" }} >第三方账号登录</div>
        <div className="logo-wx">
            <img src={wx} alt="" />
        </div>
        <div style={{ marginTop: 40, textAlign: "center" }} >登录即同意《用户服务协议》</div>
      </div>
    </div>
  );
}